<template>
	<view>
		<view class="b1">
			<view class="title">
				名企招聘
				<view class="more" @click="goto('/views/CompanyList')">更多</view>
			</view>
			<view class="inv-top-menu-bar">
				<view class="top-menu">
					<view class="top-menu-list">
						<view class="item" v-for="(item,index) in dataset" :key="index" @click="jumpTo(item.id)">
							<view class="logo_box">
								<image :src="
                    item.logo == ''
                      ? imgUrl+'index/index_head_three_bg.png'
                      : item.logo
                  " :alt="item.companyname"></image>
							</view>
							<view class="tx1">{{ item.companyname }}</view>
							<view class="tx2">
								在招职位
								<text>{{ item.jobnum }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'StarCompanyTwo',
		props: ['dataset'],
		data() {
			return {
				imgUrl: getApp().globalData.imgUlr,
			}
		},
		methods: {
			jumpTo(id) {
				this.$emit('jumpTo', {
					id
				})
			},
			goto(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.b1 {
		width: 100%;
		background-color: #ffffff;

		.inv-top-menu-bar {
			background-color: #ffffff;

			.top-menu {
				overflow: hidden;
				overflow-x: scroll;
				-webkit-overflow-scrolling: touch;

				&::-webkit-scrollbar {
					display: none;
				}
			}

			.top-menu-list {
				white-space: nowrap;

				.item {
					&:first-child {
						margin-left: 30rpx;
					}

					.tx2 {
						text {
							color: #ffaf24;
						}

						padding: 10rpx 0 35rpx;
						font-size: 22rpx;
						color: #666666;
					}

					.tx1 {
						padding: 35rpx 30rpx 0 0;
						font-size: 26rpx;
						color: #333333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.logo_box {
						image {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							max-width: 100rpx;
							max-height: 100rpx;
						}

						position: absolute;
						top: 24rpx;
						left: 28rpx;
						width: 100rpx;
						height: 100rpx;
						border: 2rpx solid #e3e3e3;
						border-radius: 4rpx;
					}

					position: relative;
					width: 400rpx;
					box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
					border-radius: 8rpx;
					margin: 4rpx 16rpx 30rpx 0;
					display: inline-block;
					vertical-align: top;
					padding-left: 150rpx;
				}
			}
		}

		.title {
			position: relative;
			font-size: 34rpx;
			color: #333333;
			padding: 25rpx 20rpx;

			.more {
				&::after {
					position: absolute;
					right: 4rpx;
					top: 50%;
					width: 12rpx;
					height: 12rpx;
					margin-top: -6rpx;
					border-top: 2rpx solid #999999;
					border-right: 2rpx solid #999999;
					transform: rotate(45deg);
					content: " ";
				}

				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0, -50%);
				font-size: 24rpx;
				color: #999999;
				line-height:normal;
				padding: 2rpx 22rpx 2rpx 0;
			}
		}
	}
</style>
